<template>
	<div class="header">
		<div class="header-left">
			<span class="iconfont iconfanhui back-icon"></span>
		</div>
		<div class="header-input">
			<span class="iconfont iconlinedesign-12 search-icon"></span>
			输入城市景点/游玩/主题
		</div>
		<router-link to="/city">
			<div class="header-right">
				{{this.$store.state.currentCity}}
				<span class="iconfont iconjiantou arrow-icon"></span>
			</div>
		</router-link>
	</div>
</template>

<script>
	export default{
	}
</script>

<style lang="stylus" scoped>
	// 1rem=html font-size=50px
	@import '../../assets/styles/varibles.styl'
	.header
		height:.86rem
		line-height :.86rem
		display:flex
		background-color :$bgColor
		color:#fff
		.header-left
			width:.64rem
			float:left
			.back-icon
				margin-left :0.15rem
				font-size :.35rem
		.header-right
			min-width:1.04rem
			padding 0 0.1rem
			float:right
			text-align:center
			color #fff
			.arrow-icon
				font-size :0.25rem
				margin-left:0.04rem
		.header-input
			flex:1
			height :.64rem
			line-height :.64rem
			background-color:#fff
			border-radius :.1rem
			margin-top :.12rem
			margin-left :.2rem
			color:#ccc
			.search-icon
				margin-left :0.2rem
</style>
